<template>
  <view class="reply-feedback-page">
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">&lt;</text>
      </view>
      <text class="page-title">追加反馈</text>
    </view>
    
    <view class="content-container">
      <!-- 原始反馈信息 -->
      <view class="original-feedback">
        <view class="feedback-header">
          <view class="header-left">
            <text class="feedback-type" :class="'type-' + feedback.type">{{ getFeedbackType(feedback.type) }}</text>
            <text class="feedback-title">{{ feedback.title }}</text>
          </view>
          <text :class="['feedback-status', 'status-' + feedback.status]">{{ getFeedbackStatus(feedback.status) }}</text>
        </view>
        
        <view class="feedback-content">
          <text class="content-text">{{ feedback.content }}</text>
          
          <view class="feedback-images" v-if="feedback.images && feedback.images.length > 0">
            <view 
              v-for="(image, index) in feedback.images" 
              :key="index" 
              class="image-item"
              @tap="previewImage(feedback.images, index)"
            >
              <text class="placeholder-icon iconfont">&#xe67f;</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 回复记录 -->
      <view class="reply-records" v-if="feedback.replies && feedback.replies.length > 0">
        <view class="records-title">历史回复记录</view>
        <view v-for="(reply, index) in feedback.replies" :key="index" class="reply-item">
          <view class="reply-header">
            <text class="reply-name">{{ reply.name }}</text>
            <text class="reply-time">{{ reply.time }}</text>
          </view>
          <text class="reply-content">{{ reply.content }}</text>
        </view>
      </view>
      
      <!-- 追加反馈表单 -->
      <view class="reply-form">
        <view class="form-title">追加反馈内容</view>
        
        <!-- 追加内容 -->
        <view class="form-item">
          <view class="textarea-wrapper">
            <textarea 
              class="form-textarea" 
              v-model="form.content" 
              placeholder="请输入需要追加的反馈内容（10-500字）" 
              placeholder-class="placeholder"
              maxlength="500"
              auto-height
            />
            <text class="input-count">{{ form.content.length }}/500</text>
          </view>
        </view>
        
        <!-- 图片上传 -->
        <view class="form-item">
          <text class="item-label">添加图片（选填）</text>
          <view class="image-uploader">
            <view 
              v-for="(image, index) in form.images" 
              :key="index" 
              class="image-item"
            >
              <text class="delete-btn" @tap="removeImage(index)">×</text>
              <text class="image-placeholder iconfont">&#xe67f;</text>
            </view>
            <view class="upload-btn" v-if="form.images.length < 3" @tap="chooseImage">
              <text class="upload-icon">+</text>
              <text class="upload-text">上传图片</text>
            </view>
          </view>
          <text class="upload-tip">支持jpg、png格式，单张不超过5MB，最多上传3张</text>
        </view>
        
        <!-- 提交按钮 -->
        <view class="form-actions">
          <view 
            class="submit-btn" 
            :class="{ 'disabled': !isFormValid }" 
            @tap="submitReply"
          >
            <text>提交追加反馈</text>
          </view>
        </view>
      </view>
      
      <!-- 提示信息 -->
      <view class="reply-tips">
        <text class="tips-icon iconfont">&#xe678;</text>
        <text class="tips-text">工作人员将在2个工作日内处理您的追加反馈，请耐心等待</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 页面参数
const feedbackId = ref(null);

// 原始反馈信息
const feedback = ref({
  id: 1,
  type: 'suggestion',
  title: '关于养老院膳食安排的建议',
  content: '希望养老院能提供更多样化的餐饮选择，特别是对于有特殊饮食需求的老人，可以提供针对性的定制餐饮方案。同时建议增加营养师的定期指导，确保老人饮食健康均衡。',
  status: 'replied',
  time: '2023-10-15 14:30',
  images: ['img1', 'img2'],
  replies: [
    {
      id: 101,
      name: '客服小李',
      content: '感谢您的宝贵建议！我们已将您的意见转达给相关部门，预计将在下个月推出更丰富的餐饮方案，并计划引入专业营养师团队提供定期指导服务。',
      time: '2023-10-16 09:15'
    }
  ]
});

// 追加表单数据
const form = ref({
  content: '',
  images: []
});

// 表单验证
const isFormValid = computed(() => {
  return form.value.content.length >= 10;
});

// 页面加载
onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  
  if (currentPage && currentPage.$page && currentPage.$page.options) {
    feedbackId.value = currentPage.$page.options.id;
    
    // 模拟获取反馈详情
    // 实际应用中应该根据id从服务器获取数据
    getFeedbackDetail();
  }
});

// 获取反馈详情
const getFeedbackDetail = () => {
  // 模拟API请求
  // 实际应用中这里应该调用接口获取数据
  console.log('获取反馈ID:', feedbackId.value);
  
  // 模拟数据已在feedback.value中初始化
};

// 选择图片
const chooseImage = () => {
  // 模拟选择图片
  const newImage = `img${form.value.images.length + 1}`;
  form.value.images.push(newImage);
  
  uni.showToast({
    title: '已添加图片',
    icon: 'none'
  });
  
  // 实际应用中应使用uni.chooseImage
  // uni.chooseImage({
  //   count: 1,
  //   sizeType: ['compressed'],
  //   sourceType: ['album', 'camera'],
  //   success: (res) => {
  //     form.value.images.push(res.tempFilePaths[0]);
  //   }
  // });
};

// 移除图片
const removeImage = (index) => {
  form.value.images.splice(index, 1);
  
  uni.showToast({
    title: '已移除图片',
    icon: 'none'
  });
};

// 预览图片
const previewImage = (images, current) => {
  // 模拟图片预览
  uni.showToast({
    title: `预览第${current + 1}张图片`,
    icon: 'none'
  });
  
  // 实际应用中应使用uni.previewImage
  // uni.previewImage({
  //   urls: images,
  //   current: current
  // });
};

// 提交追加反馈
const submitReply = () => {
  if (!isFormValid.value) {
    uni.showToast({
      title: '请输入至少10个字的反馈内容',
      icon: 'none'
    });
    return;
  }
  
  // 模拟提交
  uni.showLoading({
    title: '提交中...'
  });
  
  setTimeout(() => {
    uni.hideLoading();
    
    uni.showToast({
      title: '提交成功',
      icon: 'success'
    });
    
    // 延迟返回
    setTimeout(() => {
      goBack();
    }, 1500);
  }, 2000);
};

// 获取反馈类型文本
const getFeedbackType = (type) => {
  const typeMap = {
    'suggestion': '建议',
    'complaint': '投诉',
    'question': '咨询',
    'praise': '表扬'
  };
  
  return typeMap[type] || '其他';
};

// 获取反馈状态文本
const getFeedbackStatus = (status) => {
  const statusMap = {
    'pending': '待处理',
    'processing': '处理中',
    'replied': '已回复',
    'closed': '已关闭'
  };
  
  return statusMap[status] || '未知';
};

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1
  });
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
  min-height: 100%;
}

.reply-feedback-page {
  min-height: 100vh;
  
  .header {
    position: relative;
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid rgba(120, 194, 173, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    
    .back-btn {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .back-icon {
        font-size: 20px;
        font-weight: bold;
        color: #38a688;
      }
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #38a688;
    }
  }
  
  .content-container {
    padding: 15px;
    
    // 原始反馈信息
    .original-feedback {
      background-color: #fff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      .feedback-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        
        .header-left {
          display: flex;
          align-items: center;
          flex: 1;
          overflow: hidden;
          
          .feedback-type {
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 10px;
            margin-right: 8px;
            white-space: nowrap;
            
            &.type-suggestion {
              background-color: rgba(33, 150, 243, 0.1);
              color: #2196f3;
            }
            
            &.type-complaint {
              background-color: rgba(244, 67, 54, 0.1);
              color: #f44336;
            }
            
            &.type-question {
              background-color: rgba(255, 152, 0, 0.1);
              color: #ff9800;
            }
            
            &.type-praise {
              background-color: rgba(76, 175, 80, 0.1);
              color: #4caf50;
            }
          }
          
          .feedback-title {
            font-size: 15px;
            font-weight: 500;
            color: #5d4037;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        
        .feedback-status {
          font-size: 12px;
          padding: 2px 6px;
          border-radius: 10px;
          
          &.status-pending {
            background-color: rgba(117, 117, 117, 0.1);
            color: #757575;
          }
          
          &.status-processing {
            background-color: rgba(255, 152, 0, 0.1);
            color: #ff9800;
          }
          
          &.status-replied {
            background-color: rgba(33, 150, 243, 0.1);
            color: #2196f3;
          }
          
          &.status-closed {
            background-color: rgba(117, 117, 117, 0.1);
            color: #757575;
          }
        }
      }
      
      .feedback-content {
        .content-text {
          font-size: 14px;
          color: #5d4037;
          line-height: 1.6;
          margin-bottom: 12px;
          display: block;
        }
        
        .feedback-images {
          display: flex;
          flex-wrap: wrap;
          margin: 0 -5px;
          
          .image-item {
            width: calc(33.33% - 10px);
            height: 80px;
            margin: 5px;
            border-radius: 8px;
            background-color: rgba(141, 110, 99, 0.05);
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            
            .placeholder-icon {
              font-size: 24px;
              color: #bcaaa4;
            }
          }
        }
      }
    }
    
    // 回复记录
    .reply-records {
      background-color: #fff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      .records-title {
        font-size: 15px;
        font-weight: 500;
        color: #5d4037;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(141, 110, 99, 0.1);
      }
      
      .reply-item {
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px dashed rgba(141, 110, 99, 0.1);
        
        &:last-child {
          margin-bottom: 0;
          padding-bottom: 0;
          border-bottom: none;
        }
        
        .reply-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 6px;
          
          .reply-name {
            font-size: 14px;
            font-weight: 500;
            color: #38a688;
          }
          
          .reply-time {
            font-size: 12px;
            color: #bcaaa4;
          }
        }
        
        .reply-content {
          font-size: 14px;
          color: #5d4037;
          line-height: 1.5;
        }
      }
    }
    
    // 追加反馈表单
    .reply-form {
      background-color: #fff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      .form-title {
        font-size: 15px;
        font-weight: 500;
        color: #5d4037;
        margin-bottom: 15px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(141, 110, 99, 0.1);
      }
      
      .form-item {
        margin-bottom: 15px;
        
        .item-label {
          font-size: 14px;
          color: #5d4037;
          margin-bottom: 8px;
          display: block;
        }
        
        // 文本域
        .textarea-wrapper {
          position: relative;
          
          .form-textarea {
            width: 100%;
            min-height: 120px;
            background-color: rgba(250, 248, 246, 0.5);
            border: 1px solid #dcd7d3;
            border-radius: 8px;
            padding: 10px 15px;
            font-size: 14px;
            color: #5d4037;
            line-height: 1.5;
          }
          
          .input-count {
            position: absolute;
            right: 10px;
            bottom: 10px;
            font-size: 12px;
            color: #bcaaa4;
          }
        }
        
        .placeholder {
          color: #bcaaa4;
        }
        
        // 图片上传
        .image-uploader {
          display: flex;
          flex-wrap: wrap;
          margin: 0 -5px;
          
          .image-item {
            position: relative;
            width: calc(33.33% - 10px);
            height: 90px;
            margin: 5px;
            background-color: rgba(141, 110, 99, 0.05);
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            
            .delete-btn {
              position: absolute;
              top: 0;
              right: 0;
              width: 22px;
              height: 22px;
              background-color: rgba(0, 0, 0, 0.5);
              border-radius: 0 0 0 8px;
              color: #fff;
              font-size: 16px;
              display: flex;
              justify-content: center;
              align-items: center;
              z-index: 1;
            }
            
            .image-placeholder {
              font-size: 30px;
              color: #bcaaa4;
            }
          }
          
          .upload-btn {
            width: calc(33.33% - 10px);
            height: 90px;
            margin: 5px;
            background-color: rgba(250, 248, 246, 0.5);
            border: 1px dashed #dcd7d3;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            
            .upload-icon {
              font-size: 24px;
              color: #bcaaa4;
              margin-bottom: 5px;
            }
            
            .upload-text {
              font-size: 12px;
              color: #bcaaa4;
            }
          }
        }
        
        .upload-tip {
          font-size: 12px;
          color: #bcaaa4;
          margin-top: 8px;
          display: block;
        }
      }
      
      // 提交按钮
      .form-actions {
        margin-top: 20px;
        
        .submit-btn {
          height: 44px;
          background: linear-gradient(135deg, #78c2ad, #38a688);
          border-radius: 22px;
          display: flex;
          justify-content: center;
          align-items: center;
          box-shadow: 0 4px 10px rgba(56, 166, 136, 0.2);
          
          &.disabled {
            opacity: 0.6;
          }
          
          text {
            font-size: 16px;
            font-weight: 500;
            color: #fff;
          }
        }
      }
    }
    
    // 提示信息
    .reply-tips {
      display: flex;
      align-items: center;
      padding: 10px 15px;
      background-color: rgba(56, 166, 136, 0.05);
      border-radius: 8px;
      
      .tips-icon {
        font-size: 16px;
        color: #38a688;
        margin-right: 8px;
      }
      
      .tips-text {
        font-size: 12px;
        color: #8d6e63;
        line-height: 1.5;
      }
    }
  }
}
</style> 